<template>
    <div class="branch-wrap">
        <div class="branch-box-wrap">
            <div class="branch-box">
                <el-button class="add-branch" type="success" plain round @click="addTerm">添加分支</el-button>
                <div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index">
                    <div class="condition-node">
                        <div class="condition-node-box">
                            <div class="auto-judge">
                                <div class="sort-left" v-if="index != 0" @click.stop="arrTransfer(index, -1)">
                                    <el-icon><el-icon-arrow-left /></el-icon>
                                </div>
                                <div class="title">
                                    <span class="node-title">{{ item.nodeName }}</span>
                                    <span class="priority-title">优先级{{ item.priorityLevel }}</span>
                                    <el-icon class="close" @click.stop="delTerm(index)"><el-icon-close /></el-icon>
                                </div>
                                <div class="content">
                                    <span>{{ item.placeHolder }}</span>
                                </div>
                                <div class="sort-right" v-if="index != nodeConfig.conditionNodes.length - 1"
                                    @click.stop="arrTransfer(index)">
                                    <el-icon><el-icon-arrow-right /></el-icon>
                                </div>
                            </div>
                            <add-node v-model="item.childNode" :currentNode="item"></add-node>
                        </div>
                    </div>
                    <slot v-if="item.childNode" :node="item"></slot>
                    <div class="top-left-cover-line" v-if="index == 0"></div>
                    <div class="bottom-left-cover-line" v-if="index == 0"></div>
                    <div class="top-right-cover-line" v-if="index == nodeConfig.conditionNodes.length - 1"></div>
                    <div class="bottom-right-cover-line" v-if="index == nodeConfig.conditionNodes.length - 1"></div>
                </div>
            </div>
            <add-node v-model="nodeConfig.childNode" :currentNode="nodeConfig"></add-node>
        </div>
    </div>
</template>
<script setup>
import { ref ,watch} from 'vue'
import addNode from './addNode.vue'
import { Warning } from '@element-plus/icons-vue'
import tool from '@/utils/tool'
const props = defineProps({
    modelValue: { type: Object, default: () => { } }
})
const emit = defineEmits(['update:modelValue'])
const nodeConfig = ref(JSON.parse(JSON.stringify(props.modelValue)))
watch(nodeConfig, (newValue) => {
    emit('update:modelValue',newValue)
}, {
    deep: true
})
const delTerm = (index) => {
	const node = JSON.parse(JSON.stringify(nodeConfig.value))
	node.conditionNodes.splice(index, 1)
	node.conditionNodes.map((item, index) => {
		item.priorityLevel = index + 1;
		item.nodeName = `条件${index + 1}`;
	});
	if (node.conditionNodes.length == 1) {
		if (node.childNode) {
			if (node.conditionNodes[0].childNode) {
				reData(node.conditionNodes[0].childNode, node.childNode)
			} else {
				node.conditionNodes[0].childNode = node.childNode
			}
            node.childNode.parentId = node.parentId
		}
		emit("update:modelValue", node.conditionNodes[0].childNode);
	}
	else{
		emit("update:modelValue", node);
	}
}
const reData = (data, addData) => {
    if (!data.childNode) {
        data.childNode = addData
    } else {
        reData(data.childNode, addData)
    }
}
const addTerm = () => {
    let len = nodeConfig.value.conditionNodes.length + 1;
    nodeConfig.value.conditionNodes.push({
        nodeName: "分支" + len,
        type: 3,
        id: tool.random.getRandomId(),
        placeHolder: '满足条件',
        parentId: nodeConfig.value.id,
        "groupMode": true,
        error:false,
        priorityLevel: len,
        conditionList: [{
            conditionList: []
        }],
        nodeUserList: [],
        childNode: null,
    });
    emit("update:modelValue", nodeConfig.value)
}
const arrTransfer = (index, type = 1) => {
    nodeConfig.value.conditionNodes[index] = nodeConfig.value.conditionNodes.splice(index + type, 1, nodeConfig.value.conditionNodes[index])[0]
    nodeConfig.value.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1
    })
   emit("update:modelValue", nodeConfig.value)
}
</script>
